<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>VuePress 开发静态博客 | totrip.xin</title>
    <meta name="generator" content="VuePress 1.7.1">
    
    <meta name="description" content="使用VuePress开发博客">
    <meta name="keywords" content="VuePress Vuepress博客主题 静态博客 @vuepress/theme-blog">
    
    <link rel="preload" href="/assets/css/0.styles.b4e31d4a.css" as="style"><link rel="preload" href="/assets/js/app.c8c5e91e.js" as="script"><link rel="preload" href="/assets/js/8.426e0750.js" as="script"><link rel="preload" href="/assets/js/3.e2e147c1.js" as="script"><link rel="preload" href="/assets/js/16.f3df0553.js" as="script"><link rel="prefetch" href="/assets/js/10.0ff00088.js"><link rel="prefetch" href="/assets/js/11.6b6610ac.js"><link rel="prefetch" href="/assets/js/12.a5d96d1b.js"><link rel="prefetch" href="/assets/js/13.5e335f88.js"><link rel="prefetch" href="/assets/js/14.199c4049.js"><link rel="prefetch" href="/assets/js/15.b6795a8a.js"><link rel="prefetch" href="/assets/js/17.220ec567.js"><link rel="prefetch" href="/assets/js/4.6816cd3e.js"><link rel="prefetch" href="/assets/js/5.efc412e8.js"><link rel="prefetch" href="/assets/js/6.0ac0661b.js"><link rel="prefetch" href="/assets/js/7.fc49388d.js"><link rel="prefetch" href="/assets/js/9.638a8a7b.js"><link rel="prefetch" href="/assets/js/vuejs-paginate.c6dc7ffd.js">
    <link rel="stylesheet" href="/assets/css/0.styles.b4e31d4a.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><section id="header-wrapper"><header id="header"><div class="header-wrapper"><div class="title"><a href="/" class="nav-link home-link"><img src="/Blog.png" alt="" class="img"></a></div> <div class="header-right-wrap"><ul class="nav"><li class="nav-item"><a href="/tag/" class="nav-link">标签</a></li></ul> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header></section> <div id="mobile-header"><div class="mobile-header-bar"><div class="mobile-header-title"><a href="/" class="nav-link mobile-home-link">totrip.xin </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></div> <div class="mobile-menu-wrapper"><hr class="menu-divider"> <ul class="mobile-nav"><li class="mobile-nav-item"><a href="/tag/" class="nav-link">标签</a></li> <li class="mobile-nav-item"><!----></li></ul></div></div></div> <div class="content-wrapper"><div id="vuepress-theme-blog__post-layout"><article itemscope="itemscope" itemtype="https://schema.org/BlogPosting" class="vuepress-blog-theme-content"><header><h1 itemprop="name headline" class="post-title">
        VuePress 开发静态博客
      </h1> <div class="post-meta"><div itemprop="publisher author" itemtype="http://schema.org/Person" itemscope="itemscope" class="post-meta-author"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-navigation"><polygon points="3 11 22 2 13 21 11 13 3 11"></polygon></svg> <span itemprop="name">张焕标</span> <span itemprop="address">   in 深圳</span></div> <div class="post-meta-date"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> <time pubdate itemprop="datePublished" datetime="2020-03-21T00:00:00.000Z">
      2020-03-21
    </time></div> <ul itemprop="keywords" class="post-meta-tags"><li class="post-tag" data-v-42ccfcd5><a href="/tag/JavaScript" data-v-42ccfcd5><span data-v-42ccfcd5>JavaScript</span></a></li><li class="post-tag" data-v-42ccfcd5><a href="/tag/Vue" data-v-42ccfcd5><span data-v-42ccfcd5>Vue</span></a></li><li class="post-tag" data-v-42ccfcd5><a href="/tag/VuePress" data-v-42ccfcd5><span data-v-42ccfcd5>VuePress</span></a></li></ul></div></header> <div itemprop="articleBody" class="content__default"><blockquote><p>本文，仅针对开发过程的记录，具体配置，请移步 <a href="https://vuepress.vuejs.org/zh/" title="VuePress 官网" target="_blank" rel="noopener noreferrer">VuePress 官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> AND <a href="https://vuepress-theme-blog.ulivz.com/" title="@vuepress/theme-blog 官网" target="_blank" rel="noopener noreferrer">@vuepress/theme-blog 官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <h2 id="一、准备工作"><a href="#一、准备工作" class="header-anchor">#</a> 一、准备工作</h2> <h3 id="创建-github-新项目-并将项目克隆到本地"><a href="#创建-github-新项目-并将项目克隆到本地" class="header-anchor">#</a> 创建 <a href="https://github.com" title="github" target="_blank" rel="noopener noreferrer">github<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 新项目，并将项目克隆到本地</h3> <p><strong>注意：</strong> <em>创建项目时选择 <code>.gitignore</code> 为 <code>Node</code></em>, 这样初始化项目时，会自动生成 <code>.gitignore</code> 文件，并自动将 <code>node_modules</code> 等文件加加入其中， 这样避免了 <code>IDE</code> 监听 <code>node_modules</code> 中大量的文件而造成 <code>IDE</code> 卡顿的问题</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token function">git</span> clone git@github.com:zhb333/readme-blog.git  <span class="token comment"># 克隆到本地</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="使用-npm-初始化项目"><a href="#使用-npm-初始化项目" class="header-anchor">#</a> 使用 <code>NPM</code> 初始化项目</h3> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token builtin class-name">cd</span> readme-blog     <span class="token comment"># 进入项目目录</span>
<span class="token function">npm</span> init           <span class="token comment"># 进入项目目录</span>
<span class="token comment"># 初始化过程，根据实际情况填写配置</span>
<span class="token comment"># ……</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h3> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token function">yarn</span> <span class="token function">add</span> vuepress @vuepress/theme-blog -D <span class="token comment"># Install the dependencies</span>
<span class="token comment"># OR npm install vuepress @vuepress/theme-blog -D</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="依赖版本"><a href="#依赖版本" class="header-anchor">#</a> 依赖版本</h3> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token property">&quot;@vuepress/theme-blog&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.2.0&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;vuepress&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^1.4.0&quot;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="二、开发阶段"><a href="#二、开发阶段" class="header-anchor">#</a> 二、开发阶段</h2> <h3 id="目录结构"><a href="#目录结构" class="header-anchor">#</a> 目录结构</h3> <p>├── _posts (存放文章)<br>
│   └── 2020-03-21-VuePress开发静态博客.md<br>
│   └── ...<br>
├── .vuepress (vuepress 相关)<br>
│   ├── public<br>
│   │ └── favicon.ico (ico图标)<br>
│   ├── styles (样式)<br>
│   │   ├── index.styl (自定义样式)<br>
│   │   └── palette.styl (stylus 预设)<br>
│   ├── theme (主题)<br>
│   │     ├── layouts(布局)<br>
│   │     │    ├── clock.js(主页效果用)<br>
│   │     │    └── IndexHome.vue(主页布局)<br>
│   │     └── index.js(主题入口)<br>
│   └── config.js (Vuepress配置)<br>
│<br>
└── package.json</p> <h3 id="主题"><a href="#主题" class="header-anchor">#</a> 主题</h3> <blockquote><p>官方博客主题 <code>@vuepress/theme-blog</code>，没有主页的功能，为了让博客有个炫酷的主页，因此继承 <code>@vuepress/theme-blog</code>，自定义主题</p></blockquote> <h4 id="vuepress-theme-index-js"><a href="#vuepress-theme-index-js" class="header-anchor">#</a> .vuepress/theme/index.js</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  extend<span class="token operator">:</span> <span class="token string">'@vuepress/theme-blog'</span> <span class="token comment">// 继承`@vuepress/theme-blog</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="编写基本配置"><a href="#编写基本配置" class="header-anchor">#</a> 编写基本配置</h3> <p><strong>.vuepress/config.js</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  title<span class="token operator">:</span> <span class="token string">'forapi.cn'</span><span class="token punctuation">,</span> <span class="token comment">// 站点名称</span>
  description<span class="token operator">:</span> <span class="token string">'学习记录 代码分享 经验总结 开发教程'</span><span class="token punctuation">,</span> <span class="token comment">// 描述</span>
  lange<span class="token operator">:</span> <span class="token string">'zh-CN'</span><span class="token punctuation">,</span> <span class="token comment">// 语言</span>
  theme<span class="token operator">:</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'./theme/'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 使用自定义主题</span>
  markdown<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// markdown 配置</span>
    lineNumbers<span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// @vuepress/theme-blog 配置</span>
    dateFormat<span class="token operator">:</span> <span class="token string">'YYYY-MM-DD'</span><span class="token punctuation">,</span>
    nav<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// 导航</span>
      <span class="token punctuation">{</span>
        text<span class="token operator">:</span> <span class="token string">'Blog'</span><span class="token punctuation">,</span>
        link<span class="token operator">:</span> <span class="token string">'/posts/'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        text<span class="token operator">:</span> <span class="token string">'Tags'</span><span class="token punctuation">,</span>
        link<span class="token operator">:</span> <span class="token string">'/tag/'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    directories<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// 目录分类器</span>
      <span class="token punctuation">{</span>
        id<span class="token operator">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span>
        dirname<span class="token operator">:</span> <span class="token string">'_posts'</span><span class="token punctuation">,</span>
        path<span class="token operator">:</span> <span class="token string">'/posts/'</span><span class="token punctuation">,</span>
        itemPermalink<span class="token operator">:</span> <span class="token string">'/posts/:year/:month/:day/:slug'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    footer<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 页脚</span>
      contact<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          type<span class="token operator">:</span> <span class="token string">'github'</span><span class="token punctuation">,</span>
          link<span class="token operator">:</span> <span class="token string">'https://github.com/zhb333/readme-blog'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      copyright<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          text<span class="token operator">:</span> <span class="token string">'粤ICP备20016112号'</span><span class="token punctuation">,</span>
          link<span class="token operator">:</span> <span class="token string">'http://beian.miit.gov.cn'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          text<span class="token operator">:</span> <span class="token string">'MIT Licensed | Copyright © 2020-present forapi.cn'</span><span class="token punctuation">,</span>
          link<span class="token operator">:</span> <span class="token string">'https://github.com/zhb333/readme-blog'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br></div></div><h3 id="编写-npm运行脚本"><a href="#编写-npm运行脚本" class="header-anchor">#</a> 编写 <code>NPM</code>运行脚本</h3> <h4 id="package-json"><a href="#package-json" class="header-anchor">#</a> package.json</h4> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token property">&quot;dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress dev .&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress build .&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="启动开发环境"><a href="#启动开发环境" class="header-anchor">#</a> 启动开发环境</h3> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token function">yarn</span> dev
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>默认端口是<code>8080</code> 如果<code>8080</code>端口已被占用，会自动分配其它空闲端口，请注意！</strong></p> <p>不出意料，可以在浏览器中看到项目已经启动，由于在 <code>themeConfig.directories</code> 中，没有定义 <code>/</code> 路径的目录分类，所以首页目前为 <code>404</code> 页面，点击导航栏中的 <code>Blog</code> 可以看到存放在 <code>_posts</code> 目录下的文章列表</p> <h3 id="特别强调-重启服务"><a href="#特别强调-重启服务" class="header-anchor">#</a> 特别强调 - 重启服务</h3> <blockquote><p>在开发环境下，修改配置，新增任何文件都必须<strong>重启服务</strong>，不然，<code>Vuepress</code> 默认监听不到这些变化，编写或修改已经存在的 <code>markdown</code> 文件，页面会热更新, 但是修改 <code>markdown</code> 文件中 <a href="https://vuepress.vuejs.org/zh/guide/frontmatter.html" target="_blank" rel="noopener noreferrer">Front Matter<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 的内容，还是得<strong>重启服务</strong>才能生效！</p></blockquote> <h3 id="主页配置"><a href="#主页配置" class="header-anchor">#</a> 主页配置</h3> <blockquote><p><code>@vuepress/theme-blog</code> 认为一个 <code>URL</code> 路径对应一个文章目录，如我们存放文章的 <code>_posts</code> 目录，但是，我们的主页只是为了展示炫酷效果，所以我们可以采用比较 <code>Hack</code> 的方法，解决这个问题</p></blockquote> <h4 id="themeconfig-directories-配置"><a href="#themeconfig-directories-配置" class="header-anchor">#</a> <code>themeConfig.directories</code> 配置</h4> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-js"><code>directories<span class="token operator">:</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> <span class="token comment">// 主页配置，自定义主题就是为了这</span>
    id<span class="token operator">:</span> <span class="token string">'home'</span><span class="token punctuation">,</span>
    dirname<span class="token operator">:</span> <span class="token string">'_posts'</span><span class="token punctuation">,</span>
    path<span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
    layout<span class="token operator">:</span> <span class="token string">'IndexHome'</span> <span class="token comment">// 自定义首页布局组件</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    id<span class="token operator">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span>
    dirname<span class="token operator">:</span> <span class="token string">'_posts'</span><span class="token punctuation">,</span>
    path<span class="token operator">:</span> <span class="token string">'/posts/'</span><span class="token punctuation">,</span>
    itemPermalink<span class="token operator">:</span> <span class="token string">'/posts/:year/:month/:day/:slug'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="编写炫酷的主页"><a href="#编写炫酷的主页" class="header-anchor">#</a> 编写炫酷的主页</h3> <blockquote><p>主页编写，就像在开发一个 <code>Vue</code> 组件一样，具体想实现什么样的效果，全凭个人喜好，可以参考本人的，但我希望您能自己编写！</p></blockquote> <h4 id="编写-vuepress-theme-layouts-indexhome-vue"><a href="#编写-vuepress-theme-layouts-indexhome-vue" class="header-anchor">#</a> 编写 .vuepress/theme/layouts/IndexHome.vue</h4> <p><strong>点击 <a href="https://github.com/zhb333/readme-blog/tree/master/.vuepress/theme/layouts" target="_blank" rel="noopener noreferrer">主页布局组件<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 查看相关代码</strong></p> <p><strong>提醒：</strong> 修改配置或新增文件时，不要忘记随时 <strong>重启服务</strong></p> <h3 id="样式调整"><a href="#样式调整" class="header-anchor">#</a> 样式调整</h3> <blockquote><p><code>相信 @vuepress/theme-blog</code> 的紫色主题，并不是每个人都喜欢，因此可以通过 <code>.vuepress/styles/palette.styl</code> 修改主题配色等，通过 <code>.vuepress/styles/index.styl</code> 调整全局样式</p></blockquote> <p><strong>以下是本人研究并修改的样式，仁者见仁智者见智吧！</strong></p> <h4 id="vuepress-styles-palette-styl"><a href="#vuepress-styles-palette-styl" class="header-anchor">#</a> <code>.vuepress/styles/palette.styl</code></h4> <div class="language-styl line-numbers-mode"><pre class="language-styl"><code><span class="token variable-declaration"><span class="token variable">$accentColor</span> <span class="token operator">=</span> <span class="token hexcode">#42A5F5</span></span>
<span class="token variable-declaration"><span class="token variable">$footerBgColor</span> <span class="token operator">=</span> <span class="token func"><span class="token function">lighten</span><span class="token punctuation">(</span>$accentColor<span class="token punctuation">,</span> <span class="token number">10</span><span class="token unit">%</span><span class="token punctuation">)</span></span></span>
<span class="token variable-declaration"><span class="token variable">$footerColor</span> <span class="token operator">=</span> <span class="token hexcode">#fff</span></span>
<span class="token variable-declaration"><span class="token variable">$headerHeight</span> <span class="token operator">=</span> <span class="token number">60</span><span class="token unit">px</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="vuepress-styles-index-styl"><a href="#vuepress-styles-index-styl" class="header-anchor">#</a> <code>.vuepress/styles/index.styl</code></h4> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">#header</span><span class="token punctuation">{</span>
  padding 0 32px
  padding-top 10px
<span class="token punctuation">}</span>

<span class="token selector">.header-wrapper .title a</span> <span class="token punctuation">{</span>
  text-transform none
  color $accentColor
  font-size 24px
<span class="token punctuation">}</span>

<span class="token selector">#mobile-header .mobile-header-title .mobile-home-link</span><span class="token punctuation">{</span>
  text-transform none
  color $accentColor
<span class="token punctuation">}</span>

<span class="token selector">#vuepress-theme-blog__post-layout .vuepress-blog-theme-content</span><span class="token punctuation">{</span>
  padding 0
  box-shadow none

<span class="token punctuation">}</span>
<span class="token selector">#vuepress-theme-blog__post-layout .vuepress-blog-theme-content  .post-title</span> <span class="token punctuation">{</span>
  margin-top 0
  font-size 26px
<span class="token punctuation">}</span>

<span class="token selector">.content-wrapper</span> <span class="token punctuation">{</span>
  padding-top 90px
  padding-bottom 20px
  <span class="token property">min-height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100vh - 80px - 90px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><h2 id="三、功能增强"><a href="#三、功能增强" class="header-anchor">#</a> 三、功能增强</h2> <h3 id="评论功能"><a href="#评论功能" class="header-anchor">#</a> 评论功能</h3> <blockquote><p>使用 <code>@vuepress/theme-blog</code> 内置的 <code>@vssue/vuepress-plugin-vssue</code> 插件</p></blockquote> <blockquote><p>代码托管平台遵从 OAuth 2 spec 提供了 OAuth API。Vssue 利用平台提供的 OAuth API，使得用户可以登录并发表评论。</p></blockquote> <h4 id="使用之前需要创建-oauth-app"><a href="#使用之前需要创建-oauth-app" class="header-anchor">#</a> 使用之前需要创建  <code>OAuth App</code></h4> <p>点击 <a href="https://vssue.js.org/zh/guide/github.html" target="_blank" rel="noopener noreferrer">GitHub OAuth App<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 查看创建步骤</p> <p>创建好 <a href="https://vssue.js.org/zh/guide/github.html" target="_blank" rel="noopener noreferrer">GitHub OAuth App<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 之后，将得到 <code>Client ID</code> 以及 <code>Client Secret</code></p> <h4 id="themeconfig-comment"><a href="#themeconfig-comment" class="header-anchor">#</a> themeConfig.comment</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// Vssue</span>
<span class="token punctuation">{</span>
  service<span class="token operator">:</span> <span class="token string">'vssue'</span><span class="token punctuation">,</span>
  owner<span class="token operator">:</span> <span class="token string">'You'</span><span class="token punctuation">,</span> <span class="token comment">// github 用户名</span>
  repo<span class="token operator">:</span> <span class="token string">'Your repo'</span><span class="token punctuation">,</span> <span class="token comment">// 仓库名</span>
  clientId<span class="token operator">:</span> <span class="token string">'Your clientId'</span><span class="token punctuation">,</span>
  clientSecret<span class="token operator">:</span> <span class="token string">'Your clientSecret'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="订阅功能"><a href="#订阅功能" class="header-anchor">#</a> 订阅功能</h3> <blockquote><p>使用  <code>@vuepress/theme-blog</code> 内置的 <code>vuepress-plugin-mailchimp</code> 插件</p></blockquote> <p>使用订阅功能之前，需要先到 <a href="https://mailchimp.com/" target="_blank" rel="noopener noreferrer">mailchimp<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 注册一个账号</p> <p>注册成功后，点击 <a href="https://vuepress-plugin-mailchimp.billyyyyy3320.com/#config" target="_blank" rel="noopener noreferrer">获取 endpoint<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 的方法</p> <h4 id="themeconfig-newsletter"><a href="#themeconfig-newsletter" class="header-anchor">#</a> themeConfig.newsletter</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
  title<span class="token operator">:</span> <span class="token string">'邮件订阅'</span><span class="token punctuation">,</span>
  content<span class="token operator">:</span> <span class="token string">'请输入您的邮箱...'</span><span class="token punctuation">,</span>
  submitText<span class="token operator">:</span> <span class="token string">'订阅'</span><span class="token punctuation">,</span>
  endpoint<span class="token operator">:</span> <span class="token string">'https://billyyyyy3320.us4.list-manage.com/subscribe/post?u=4905113ee00d8210c2004e038&amp;amp;id=bd18d40138'</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="网站增强"><a href="#网站增强" class="header-anchor">#</a> 网站增强</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
  sitemap<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// Sitemap generator plugin for vuepress.</span>
    hostname<span class="token operator">:</span> <span class="token string">'http://forapi.cn'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  feed<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// RSS, Atom, and JSON feeds generator plugin for VuePress 1.x</span>
    canonical_base<span class="token operator">:</span><span class="token string">'http://forapi.cn'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  smoothScroll<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// allows you to enable smooth scrolling</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="部署"><a href="#部署" class="header-anchor">#</a> 部署</h2> <p>点击 <a href="https://vuepress.vuejs.org/zh/guide/deploy.html#github-pages" target="_blank" rel="noopener noreferrer">部署<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 进入官网查看具体的部署步骤</p> <p>（完！） 😅</p></div> <footer><!----> <hr> <!----></footer></article> <div class="sticker vuepress-toc"><div class="vuepress-toc-item vuepress-toc-h2 active"><a href="#一、准备工作" title="一、准备工作">一、准备工作</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#创建-github-新项目-并将项目克隆到本地" title="创建 github 新项目，并将项目克隆到本地">创建 github 新项目，并将项目克隆到本地</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#使用-npm-初始化项目" title="使用 NPM 初始化项目">使用 NPM 初始化项目</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#安装" title="安装">安装</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#依赖版本" title="依赖版本">依赖版本</a></div><div class="vuepress-toc-item vuepress-toc-h2"><a href="#二、开发阶段" title="二、开发阶段">二、开发阶段</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#目录结构" title="目录结构">目录结构</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#主题" title="主题">主题</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#编写基本配置" title="编写基本配置">编写基本配置</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#编写-npm运行脚本" title="编写 NPM运行脚本">编写 NPM运行脚本</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#启动开发环境" title="启动开发环境">启动开发环境</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#特别强调-重启服务" title="特别强调 - 重启服务">特别强调 - 重启服务</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#主页配置" title="主页配置">主页配置</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#编写炫酷的主页" title="编写炫酷的主页">编写炫酷的主页</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#样式调整" title="样式调整">样式调整</a></div><div class="vuepress-toc-item vuepress-toc-h2"><a href="#三、功能增强" title="三、功能增强">三、功能增强</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#评论功能" title="评论功能">评论功能</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#订阅功能" title="订阅功能">订阅功能</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#网站增强" title="网站增强">网站增强</a></div><div class="vuepress-toc-item vuepress-toc-h2"><a href="#部署" title="部署">部署</a></div></div></div></div> <footer class="footer" data-v-fdbf4940><div class="footer-left-wrap" data-v-fdbf4940><ul class="contact" data-v-fdbf4940><li class="contact-item" data-v-fdbf4940><a href="https://gitee.com/chenggang321/chenggang321.git" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-fdbf4940><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github" data-v-fdbf4940><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" data-v-fdbf4940></path></svg>
          
        </a></li></ul></div> <div class="footer-right-wrap" data-v-fdbf4940><ul class="copyright" data-v-fdbf4940><li class="copyright-item" data-v-fdbf4940><a href="http://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-fdbf4940>皖ICP备17006327号-1</a></li><li class="copyright-item" data-v-fdbf4940><a href="https://gitee.com/chenggang321/chenggang321.git" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-fdbf4940>MIT Licensed | Copyright © 2020-present totrip.xin</a></li></ul></div></footer></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.c8c5e91e.js" defer></script><script src="/assets/js/8.426e0750.js" defer></script><script src="/assets/js/3.e2e147c1.js" defer></script><script src="/assets/js/16.f3df0553.js" defer></script>
  </body>
</html>
